<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>招聘网：移动端页面</title>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="./css/normalize.css" />
        <link rel="stylesheet" href="./css/index.css" />
        <script src="./js/flexible.js"></script>
        <!-- 轮播图资源文件 -->
        <link rel="stylesheet" href="./css/swiper.min.css" />
        <script src="./js/swiper.min.js"></script>
        <!-- 轮播图js代码 -->
        <script>
            // 页面加载事件（页面元素加载完毕后再执行js代码） + 闭包/立即执行函数（避免变量冲突）
            addEventListener("load", function () {
                // 第一个闭包：就业指导模块
                (function () {
                    var swiper = new Swiper(".myBd-container", {
                        // 可视窗口中显示几张图（中间1个完整的，旁边各占0.5张，刚好2张）
                        slidesPerView: 2,
                        // 各张图片的间距
                        spaceBetween: 30,
                        // 当前激活的图片是否居中，默认false是靠左的
                        centeredSlides: true,
                        loop: true,
                        pagination: {
                            el: ".swiper-pagination",
                            clickable: true,
                        },
                        // 箭头
                        navigation: {
                            nextEl: ".swiper-button-next",
                            prevEl: ".swiper-button-prev",
                        },
                    });
                })();
                // 第二个闭包：充电计划模块
                (function () {
                    // 多个轮播图共存时，需要修改成不同的类名，但原类名尽量别改，自己新增自定义类名就好
                    var swiper = new Swiper(".myStudy-container", {
                        slidesPerView: 2.2,
                        spaceBetween: 20,
                    });
                })();
            });
        </script>
    </head>
    <body>
        <!-- wrap模块：第一个大容器 -->
        <section class="wrap">
            <!-- -------------------头部区域 -->
            <header class="header">大佬招聘会</header>
            <!-- -------------------导航栏区域 -->
            <div class="nav">
                <a href="#" class="item">
                    <img src="./icons/icon1.png" alt="" />
                    <span>HR面试</span>
                </a>
                <a href="#" class="item">
                    <img src="./icons/icon2.png" alt="" />
                    <span>笔试</span>
                </a>
                <a href="#" class="item">
                    <img src="./icons/icon3.png" alt="" />
                    <span>技术面试</span>
                </a>
                <a href="#" class="item">
                    <img src="./icons/icon4.png" alt="" />
                    <span>模拟面试</span>
                </a>
                <a href="#" class="item">
                    <img src="./icons/icon5.png" alt="" />
                    <span>面试技巧</span>
                </a>
                <a href="#" class="item">
                    <img src="./icons/icon6.png" alt="" />
                    <span>薪资查询</span>
                </a>
            </div>
            <!-- -------------------GO区域 -->
            <section class="go">
                <img src="./images/go.png" alt="" />
            </section>
        </section>
        <!-- content模块1：第二个大容器 -->
        <section class="content">
            <!-- 就业指导：头部 -->
            <div class="con-hd">
                <h4>
                    <span class="icon"
                        ><img src="./icons/i1.png" alt=""
                    /></span>
                    就业指导
                </h4>
                <a href="#" class="more">更多&gt;&gt;</a>
            </div>
            <!-- 就业指导：内容 -->
            <div class="con-bd">
                <!-- 轮播图html结构 -->
                <div class="swiper-container myBd-container">
                    <!-- 图片 -->
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href="#">
                                <img
                                    src="./images/nature/nature-1.jpg"
                                    alt=""
                                />
                            </a>
                            <p>老师教你应对面试技巧</p>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <img
                                    src="./images/nature/nature-2.jpg"
                                    alt=""
                                />
                            </a>
                            <p>老师教你应对面试技巧</p>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <img
                                    src="./images/nature/nature-3.jpg"
                                    alt=""
                                />
                            </a>
                            <p>老师教你应对面试技巧</p>
                        </div>
                    </div>
                </div>
                <!-- 箭头：放在轮播图外面 -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </section>
        <!-- content模块2：第三个大容器 -->
        <section class="content content-study">
            <!-- 充电学习：头部 -->
            <div class="con-hd">
                <h4>
                    <span class="icon"
                        ><img src="./icons/i2.png" alt=""
                    /></span>
                    充电学习
                </h4>
                <a href="#" class="more">更多&gt;&gt;</a>
            </div>
            <!-- 充电学习：内容 -->
            <div class="con-study">
                <!-- 记得添加【swiper-container】类名，因为它本就封装了一些样式，例如溢出隐藏、相对定位等，不加该类名，就需要给父容器添加属性样式 -->
                <div class="swiper-container myStudy-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="./images/nature/nature-6.jpg" alt="" />
                            <h5>说地道英语，告别中式英语</h5>
                            <p>125人学习</p>
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/nature/nature-7.jpg" alt="" />
                            <h5>说地道英语，告别中式英语</h5>
                            <p>125人学习</p>
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/nature/nature-8.jpg" alt="" />
                            <h5>说地道英语，告别中式英语</h5>
                            <p>125人学习</p>
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/nature/nature-9.jpg" alt="" />
                            <h5>说地道英语，告别中式英语</h5>
                            <p>125人学习</p>
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/nature/nature-10.jpg" alt="" />
                            <h5>说地道英语，告别中式英语</h5>
                            <p>125人学习</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- footer模块：第三个大容器 -->
        <section class="footer">
            <a href="#" class="item">
                <img src="./icons/home.png" alt="" />
                <p>首页</p>
            </a>
            <a href="#" class="item">
                <img src="./icons/net.png" alt="" />
                <p>模拟面试</p>
            </a>
            <a href="#" class="item">
                <img src="./icons/ms.png" alt="" />
                <p>技术面试</p>
            </a>
            <a href="#" class="item">
                <img src="./icons/user.png" alt="" />
                <p>我的</p>
            </a>
        </section>
        <!-- ---------------------- -->
    </body>
</html>
